<template>
  <div>
    <header>
      <NavigationBar v-if="!hideNavbar" :showUploadButton="showUploadButton" @upload-click="openFileUploadDialog" />
      <slot name="header"></slot>
    </header>
    <main
      tabindex="-1"
      class="relative grid h-screen grid-cols-[theme(spacing.18)_auto] overflow-hidden bg-immich-bg pt-[var(--navbar-height)] dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
    >
      <!-- 动态组件渲染 -->
      <component :is="sidebar" v-if="sidebar" />
      
      <!-- 管理员侧边栏 -->
      <admin-side-bar v-else-if="admin" />
      
      <!-- 默认侧边栏 -->
      <side-bar v-else />

      <section class="relative">
        <div v-if="title || buttons" class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg">
          <div class="flex gap-2 items-center">
            <div v-if="title" class="font-medium" tabindex="-1" :id="headerId">{{ title }}</div>
            <p v-if="description" class="text-sm text-gray-400 dark:text-gray-600">{{ description }}</p>
          </div>
          <slot name="buttons"></slot>
        </div>

        <div :class="[scrollbarClass, 'scrollbar-stable absolute', hasTitleClass, 'w-full overflow-y-auto']" v-bind="useActions">
          <slot name="children"></slot>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
// import { openFileUploadDialog } from '../../utils/file-uploader';
import NavigationBar from '../shared-components/navigation-bar/navigation-bar.vue';
import SideBar from '../shared-components/side-bar/side-bar.vue';
import AdminSideBar from '../shared-components/side-bar/admin-side-bar.vue';

export default {
  name: 'UserPageLayout',
  components: {
    NavigationBar,
    SideBar,
    AdminSideBar,
  },
  props: {
    hideNavbar: {
      type: Boolean,
      default: false,
    },
    showUploadButton: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: undefined,
    },
    description: {
      type: String,
      default: undefined,
    },
    scrollbar: {
      type: Boolean,
      default: true,
    },
    admin: {
      type: Boolean,
      default: false,
    },
    useActions: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      headerId: 'user-page-header',
      scrollbarClass: this.scrollbar ? 'immich-scrollbar p-2' : 'scrollbar-hidden',
      hasTitleClass: this.title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full',
    };
  },
  methods: {
    openFileUploadDialog() {
      console.log('debug')
    },
  },
};
</script>

<style scoped>
/* ... existing code ... */
</style>